/**
 * @description: 「档期日历」组件，主要用于「主持风采」模块
 * @author: Ruan Jiazhen
 * @date: 2024-03-29 15:07:18
 **/
import { generatePanelDayList, generateSwiperPanelData } from '@/subpkg/components/ScheduleCalendar/core/data';
import dayjs from 'dayjs';
import { ComponentWithComputed } from 'miniprogram-computed';

/** swiper各项的左右索引MAP */
const SWIPER_INDEX_DIRECTION_MAP = [
  { left: 2, right: 1 },
  { left: 0, right: 2 },
  { left: 1, right: 0 },
];

ComponentWithComputed({
  properties: {
    /** 初始显示日期 */
    startDate: {
      type: String,
      value: dayjs().format('YYYY-MM-DD'),
    },
    markList: {
      type: Array,
      value: [] as Array<Mark>,
    },
  },
  data: {
    currentSwiperIndex: 0,
    swiperPanelData: Array.from({ length: 3 }, (_, k) => ({
      year: 0,
      month: 0,
      dayList: Array.from({ length: 35 }, (_, k) => k + 1),
    })),
  },
  computed: {
    currentDate(data) {
      const { swiperPanelData, currentSwiperIndex } = data;
      return {
        year: swiperPanelData[currentSwiperIndex].year,
        month: swiperPanelData[currentSwiperIndex].month,
      };
    },
  },
  watch: {
    currentDate() {
      this.triggerEvent('change', this.data.currentDate);
    },
    markList() {
      this.initDate();
    },
  },
  lifetimes: {
    attached() {
      this.initDate();
    },
  },
  methods: {
    initDate() {
      console.log('initDate', this.data);
      this.setData({
        swiperPanelData: generateSwiperPanelData(
          {
            year: dayjs(this.data.startDate).year(),
            month: dayjs(this.data.startDate).month() + 1,
          },
          this.data.markList,
        ),
      });
    },
    onClickArrow(e: WechatMiniprogram.TouchEvent) {
      const { direction } = e.currentTarget.dataset;
      const { currentSwiperIndex } = this.data;
      const newSwiperIndex = SWIPER_INDEX_DIRECTION_MAP[currentSwiperIndex][direction as 'left' | 'right'];
      this.setData({
        currentSwiperIndex: newSwiperIndex,
      });
      this.updateSwiperPanelData(newSwiperIndex, currentSwiperIndex);
    },
    async onSwiperChange(e: WechatMiniprogram.SwiperChange) {
      // 防止点击箭头切换swiper后再次触发面板更新
      const isTouch = e.detail.source === 'touch';
      if (!isTouch) return;

      const newSwiperIndex = e.detail.current;
      const oldSwiperIndex = this.data.currentSwiperIndex;

      this.setData({
        currentSwiperIndex: newSwiperIndex,
      });

      this.updateSwiperPanelData(newSwiperIndex, oldSwiperIndex);
    },
    /** 更新Swiper面板数据 */
    updateSwiperPanelData(newSwiperIndex: number, oldSwiperIndex: number) {
      const moveDirection = SWIPER_INDEX_DIRECTION_MAP[oldSwiperIndex].left === newSwiperIndex ? 'left' : 'right';

      const needUpdateSwiperIndex = [0, 1, 2].filter((index) => index !== newSwiperIndex && index !== oldSwiperIndex)[0];

      const needUpdateSwiperDataDate = dayjs(
        `${this.data.swiperPanelData[newSwiperIndex].year}-${this.data.swiperPanelData[newSwiperIndex].month}`,
      ).add(moveDirection === 'left' ? -1 : 1, 'month');

      const needUpdateSwiperDayList = generatePanelDayList(
        {
          year: needUpdateSwiperDataDate.year(),
          month: needUpdateSwiperDataDate.month() + 1,
        },
        this.data.markList,
      );

      this.setData({
        currentSwiperIndex: newSwiperIndex,
        [`swiperPanelData[${needUpdateSwiperIndex}]`]: {
          year: needUpdateSwiperDataDate.year(),
          month: needUpdateSwiperDataDate.month() + 1,
          dayList: needUpdateSwiperDayList,
        },
      });
    },
  },
});
